import { Button, Cascader } from 'antd'
import { useContext } from 'react'
import { useRecoilValue } from 'recoil'
import styles from './index.module.less'
import { theQuarterData } from '@/store/user'
import { homeContext } from '../../_context'
import IconSvg from '@/components/IconSvg'

export default () => {
  const quarterData = useRecoilValue(theQuarterData)

  const { task, handleTaskChange, getTables, resetData, searchData } = useContext(homeContext)

  return (
    <div className={styles.search}>
      <Cascader
        changeOnSelect
        value={task}
        style={{ width: 200, marginRight: '16px' }}
        onChange={(e) => handleTaskChange(e)}
        options={quarterData}
        placeholder={'请选择任务'}
        displayRender={(value) => value.join('')}
        allowClear={false}
      />
      <div className={styles.btns}>
        <Button onClick={() => searchData()} icon={<IconSvg name='search' />}>
          搜索
        </Button>
        <Button onClick={() => resetData()} icon={<IconSvg name='reset' />}>
          重置
        </Button>
      </div>
    </div>
  )
}
